<!DOCTYPE html>
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
  <meta name="description" content="tong.li&#39;s blog">
  <meta name="keyword" content="彤哥哥博客，95后技术爱好者,现就职于同程旅行/同程艺龙上海分公司，专注于互联网技术分享的平台。">
  
    <link rel="shortcut icon" href="/css/images/icon.png">
  
  <title>
    
      ES6回顾 | 彤哥哥的博客
    
  </title>
  <link href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <link href="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css" rel="stylesheet">
  <link href="https://cdn.staticfile.org/highlight.js/9.12.0/styles/tomorrow-night.min.css" rel="stylesheet">
  
<link rel="stylesheet" href="/css/style.css">

  
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/geopattern/1.2.3/js/geopattern.min.js"></script>
  <script src="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.js"></script>
  
    
<script src="/js/qrious.js"></script>

  
  
  
  
    <!-- MathJax support START -->
    <script type="text/x-mathjax-config">
      MathJax.Hub.Config({
        tex2jax: {
          inlineMath: [ ['$','$'], ["\\(","\\)"]  ],
          processEscapes: true,
          skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
        }
      });
    </script>

    <script type="text/x-mathjax-config">
      MathJax.Hub.Queue(function() {
        var all = MathJax.Hub.getAllJax(), i;
        for (i=0; i < all.length; i += 1) {
          all[i].SourceElement().parentNode.className += ' has-jax';
        }
      });
    </script>
    <script type="text/javascript" src="https://cdn.staticfile.org/mathjax/2.7.5/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
    <!-- MathJax support END -->
  


  
  
    
<script src="/js/local-search.js"></script>


<meta name="generator" content="Hexo 5.4.2"></head>
<div class="wechat-share">
  <img src="/css/images/logo.png" />
</div>
  <body>
    <header class="header fixed-header">
  <div class="header-container">
    <a class="home-link" href="/">
      <div class="logo"></div>
      <span>彤哥哥的博客</span>
    </a>
    <ul class="right-list">
      
        <li class="list-item">
          
            <a href="/" class="item-link">主页</a>
          
        </li>
      
        <li class="list-item">
          
            <a href="/series/" class="item-link">分类</a>
          
        </li>
      
        <li class="list-item">
          
            <a href="/tags/" class="item-link">标签</a>
          
        </li>
      
        <li class="list-item">
          
            <a href="/archives/" class="item-link">归档</a>
          
        </li>
      
        <li class="list-item">
          
            <a href="/project/" class="item-link">项目</a>
          
        </li>
      
        <li class="list-item">
          
            <a href="/about/" class="item-link">关于</a>
          
        </li>
      
      
        <li class="menu-item menu-item-search right-list">
    <a role="button" class="popup-trigger">
        <i class="fa fa-search fa-fw"></i>
    </a>
</li>
      
    </ul>
    <div class="menu">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </div>
    <div class="menu-mask">
      <ul class="menu-list">
        
          <li class="menu-item">
            
              <a href="/" class="menu-link">主页</a>
            
          </li>
        
          <li class="menu-item">
            
              <a href="/series/" class="menu-link">分类</a>
            
          </li>
        
          <li class="menu-item">
            
              <a href="/tags/" class="menu-link">标签</a>
            
          </li>
        
          <li class="menu-item">
            
              <a href="/archives/" class="menu-link">归档</a>
            
          </li>
        
          <li class="menu-item">
            
              <a href="/project/" class="menu-link">项目</a>
            
          </li>
        
          <li class="menu-item">
            
              <a href="/about/" class="menu-link">关于</a>
            
          </li>
        
      </ul>
    </div>
    
      <div class="search-pop-overlay">
    <div class="popup search-popup">
        <div class="search-header">
            <span class="search-icon">
                <i class="fa fa-search"></i>
            </span>
            <div class="search-input-container">
                <input autocomplete="off" autocapitalize="off"
                    placeholder="Please enter your keyword(s) to search." spellcheck="false"
                    type="search" class="search-input">
            </div>
            <span class="popup-btn-close">
                <i class="fa fa-times-circle"></i>
            </span>
        </div>
        <div id="search-result">
            <div id="no-result">
                <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
            </div>
        </div>
    </div>
</div>
    
  </div>
</header>

    <div id="article-banner">
  <h2>ES6回顾</h2>
  <p class="post-date">2020-01-01</p>
  <div class="arrow-down">
    <a href="javascript:;"></a>
  </div>
</div>
<main class="app-body flex-box">
  <!-- Article START -->
  <article class="post-article">
    <section class="markdown-content"><h1 id="1-了解ES6"><a href="#1-了解ES6" class="headerlink" title="1. 了解ES6"></a>1. 了解ES6</h1><h2 id="1-1-为什么要回顾ES6"><a href="#1-1-为什么要回顾ES6" class="headerlink" title="1.1 为什么要回顾ES6"></a>1.1 为什么要回顾ES6</h2><ul>
<li>作为后端工程师，学习前端知识，遵循人无我有、人有我优的原则，保持竞争力</li>
<li>现在使用的主流前端框架都是基于ES6，学好前端，ES6+就是必修课，原生JS玩的溜，什么流行框架都是浮云。</li>
<li>想做全栈工程师，能够在公司独当一面的人绝对是受人(尤其是老板)欢迎的人，另外，自主创业的快速首选。</li>
<li>站在项目宏观角度统筹，与不同技术栈团队相互配合，管理者前期着重点肯定业务和技术起步，后续考虑的角度就要转移到产品和市场。</li>
</ul>
<h2 id="1-2-什么是ES6"><a href="#1-2-什么是ES6" class="headerlink" title="1.2 什么是ES6"></a>1.2 什么是ES6</h2><p>ES6，是ECMAScript 6的简称，它是 JavaScript 语言的下一代标准，己于 2015 年 6 月正式发布。  </p>
<p>它的目标是使 JavaScript语言可以用于编写复杂的大型应用程序，成为企业级开发语言 。</p>
<h2 id="1-3-前端发展史"><a href="#1-3-前端发展史" class="headerlink" title="1.3 前端发展史"></a>1.3 前端发展史</h2><ul>
<li><p>web1.0时代</p>
<p>最初的网页以HTML为主，是纯静态的网页。网页是只读的，信息流只能从服务的到客户端单向流通。<strong>开发人员<br>也只关心页面的样式和内容</strong>即可 。网页是“只读的”，用户只能搜索信息，浏览信息。Web1.0是由内容驱动的，内容来自于商业机构，服务于消费者；</p>
</li>
<li><p>web2.0时代</p>
<p>1995年，网景工程师Brendan Eich 花了10天时间设计了JavaScript语言。<br>1996年，微软发布了JScript，其实是JavaScript的逆向工程实现。<br>1997年，为了统一各种不同script脚本语言，ECMA（欧洲计算机制造商协会）以JavaScript为基础，制定了<br>ECMAscript 标准规范。JavaScript和JScript都是 ECMAScript 的标准实现者，随后各大浏览器厂商纷纷实现了<br>ECMAScript 标准 。</p>
<p>所以，ECMAScript是浏览器脚本语言的规范，而各种我们熟知的js语言，如JavaScript则是规范的具体实现  。</p>
<p>之后，ECMAScript就进入了快速发展期。  </p>
<p>1998年6月，ECMAScript 2.0 发布。<br>1999年12月，ECMAScript 3.0 发布。这时，ECMAScript 规范本身也相对比较完善和稳定了，但是接下来的事<br>情，就比较悲剧了。<br>2007年10月。。。。ECMAScript 4.0 草案发布。<br>这次的新规范，历时颇久，规范的新内容也有了很多争议。在制定ES4的时候，是分成了两个工作组同时工作：</p>
<p>​       a). 一边是以 Adobe, Mozilla, Opera 和 Google为主的 ECMAScript 4 工作组。  </p>
<p>​       b). 一边是以 Microsoft 和 Yahoo 为主的 ECMAScript 3.1 工作组。  </p>
<p>ECMAScript 4 的很多主张比较激进，改动较大。而 ECMAScript 3.1 则主张小幅更新。最终经过 TC39 的会<br>议，决定将一部分不那么激进的改动保留发布为 ECMAScript 3.1，而ES4的内容，则延续到了后来的<br>ECMAScript5和6版本中 。</p>
<p>2009年12月，ECMAScript 5 发布。<br>2011年6月，ECMAScript 5.1 发布。<br>2015年6月，ECMAScript 6，也就是 ECMAScript 2015 发布了。 并且从 ECMAScript 6 开始，开始采用年号来<br>做版本。即 ECMAScript 2015，就是ECMAScript6。<br>2016年 6月，小幅修订的《ECMAScript 2016标准》 (简称 ES2016)如期发布， 这个版本可以看作是 ES6.1版，<br>因为两者的差异非常小(只新增了数组实例的 includes 方法 和指数运算符)，基本上可以认为是同 一个标准 。<br>2017 年 6 月发布了ES2017 标准。<br>因此， ES6 既是一个历史名词，也是一个泛指，含义是 5.1 版本以后的 JavaScript 的下一代标准，涵盖了 ES2015、<br>ES2016、 ES2017、ES2018、ES2019等，而ES2015 则是正式名称，特指当年发布的正式 版本的语言标准  </p>
<p>Web 2.0允许用户自主上传内容，分享内容。</p>
<p><strong>它的初衷就在于让互联网更加贴近民主，使用户更好的互动</strong>。</p>
</li>
<li><p>Web3.0时代</p>
<p>Web3.0的一个关键元素是“语义网络”，Web 3.0使得在线应用和网站可以<strong>接收到已经在网络上的信息，并将新的信息和数据反馈给用户</strong>。比如智能推荐、区块链场景下的应用。</p>
<p>关于Web3.0的实现存在一些挑战。目前处于概念场景状态。但是从长远来看，人类正在处于互联网变革时代的边缘，相信未来会颠覆现在的互联网格局。</p>
</li>
</ul>
<h1 id="2-ES6新特性"><a href="#2-ES6新特性" class="headerlink" title="2. ES6新特性"></a>2. ES6新特性</h1><h2 id="2-1-let和const变量修饰符"><a href="#2-1-let和const变量修饰符" class="headerlink" title="2.1  let和const变量修饰符"></a>2.1  let和const变量修饰符</h2><p>我们在JS中定义变量的时候，一直只有一个关键字:<strong>var</strong>，但是它有个问题，就是定义的变量有时会莫名其妙的成为全局变量。</p>
<p>例如这样一段代码:</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; <span class="number">5</span>; i++)&#123;</span><br><span class="line">	<span class="variable language_">console</span>.<span class="title function_">log</span>(i);  <span class="comment">// 一次循环输出0-4</span></span><br><span class="line">&#125; </span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(i);    <span class="comment">// 输出5</span></span><br></pre></td></tr></table></figure>

<p>我们都知道JS是是弱语言，动态脚本语言，这门语言的作用域是分为全局作用域和全局作用就，并不是C、C++、Java的大括号的作用域。</p>
<p>这块相当于在for循环外面定义了一个i变量，js称为变量提升，只要在同一个作用域，大家都可以用。</p>
<p>上述代码for循环外是全局变量区域，所以这个i是全局变量，虽然在循环外部也可以获取到变量i的值，显然变量i的作用域范围太大了，在做复杂页面时，会带来很大的问题。</p>
<p>所以ES6位我们提供了let变量修饰符，let所声明的变量，只在ket命令所在的代码块内有效。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">for</span>(<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; <span class="number">5</span>; i++)&#123;</span><br><span class="line">	<span class="variable language_">console</span>.<span class="title function_">log</span>(i);  <span class="comment">// 一次循环输出0-4</span></span><br><span class="line">&#125; </span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(i);    <span class="comment">// 会报错：Uncaught ReferenceError: i is not defined at &lt;anonymous&gt;:1:13</span></span><br></pre></td></tr></table></figure>

<p>这样，就把变量i的作用域控制在循环范围内了。</p>
<p><strong>const</strong>变量其实相当于我们Java的final变量修饰符，一旦定义了，不能被修改。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> a = <span class="number">1</span>;  <span class="comment">// 定义一个常量a</span></span><br><span class="line">a = <span class="number">6</span>;   <span class="comment">// 如果赋值会报错：Uncaught TypeError: Assignment to constant variable. at &lt;anonymous&gt;:1:3</span></span><br></pre></td></tr></table></figure>



<h2 id="2-2-字符串扩展"><a href="#2-2-字符串扩展" class="headerlink" title="2.2 字符串扩展"></a>2.2 字符串扩展</h2><p>在ES6中，为字符串扩展了几个新的API：  </p>
<ul>
<li>includes() ：返回布尔值，表示是否找到了参数字符串。</li>
<li>startsWith() ：返回布尔值，表示参数字符串是否在原字符串的头部。</li>
<li>endsWith() ：返回布尔值，表示参数字符串是否在原字符串的尾部。  </li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> str = <span class="string">&quot;hello litong&quot;</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(str, <span class="string">&quot; 中是否包含了tong =&gt; &quot;</span>, str.<span class="title function_">includes</span>(<span class="string">&quot;tong&quot;</span>));  <span class="comment">// true</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(str, <span class="string">&quot; 中是否包含了lisi =&gt; &quot;</span>, str.<span class="title function_">includes</span>(<span class="string">&quot;lisi&quot;</span>));  <span class="comment">// fasle</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(str, <span class="string">&quot; 中是否以h开头 =&gt; &quot;</span>, str.<span class="title function_">startsWith</span>(<span class="string">&quot;h&quot;</span>)); <span class="comment">// true</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(str, <span class="string">&quot; 中是否以a开头 =&gt; &quot;</span>, str.<span class="title function_">startsWith</span>(<span class="string">&quot;a&quot;</span>)); <span class="comment">// fasle</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(str, <span class="string">&quot; 中是否以a结束 =&gt; &quot;</span>, str.<span class="title function_">endsWith</span>(<span class="string">&quot;g&quot;</span>));   <span class="comment">// true</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(str, <span class="string">&quot; 中是否以h结束 =&gt; &quot;</span>, str.<span class="title function_">endsWith</span>(<span class="string">&quot;h&quot;</span>)); <span class="comment">// fasle</span></span><br></pre></td></tr></table></figure>

<p>除此之外，ES6位我们提供了字符串模板标记，比如：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> str = <span class="string">&#x27;litong\n未来很美\n你要加油\n&#x27;</span>;  <span class="comment">// 以前的写法</span></span><br><span class="line"><span class="keyword">let</span> words = <span class="string">`</span></span><br><span class="line"><span class="string">litong</span></span><br><span class="line"><span class="string">未来很美</span></span><br><span class="line"><span class="string">你要加油</span></span><br><span class="line"><span class="string">`</span>;  <span class="comment">// 现在的写法可以替代以前的写法</span></span><br></pre></td></tr></table></figure>



<h2 id="2-3-解构表达式"><a href="#2-3-解构表达式" class="headerlink" title="2.3 解构表达式"></a>2.3 解构表达式</h2><p>什么是解构？ ES6中允许按照一定模式从数组和对象中提取值，然后对变量进行赋值，这被称为解构(Destructuring)。  </p>
<h3 id="2-3-1-数组解构"><a href="#2-3-1-数组解构" class="headerlink" title="2.3.1  数组解构"></a>2.3.1  数组解构</h3><p>假设现有一个数组之前，我想获取其中的值，只能通过角标。ES6可以这样：  </p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> arr = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>]; <span class="comment">// 假设的数组</span></span><br><span class="line"><span class="keyword">const</span> [x,y,z] = arr; <span class="comment">// x，y，z将与arr中的每个位置对应来取值</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(x,y,z);  <span class="comment">// 打印1 2 3</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> [a] = arr; <span class="comment">//只匹配1个参数</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(a); <span class="comment">// 只打印1</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> [b,,c] = arr; <span class="comment">// 只匹配任意的几个参数</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(b,c);  <span class="comment">// 打印1 3</span></span><br></pre></td></tr></table></figure>

<h3 id="2-3-2-对象解构"><a href="#2-3-2-对象解构" class="headerlink" title="2.3.2  对象解构"></a>2.3.2  对象解构</h3><p>例如有个staff对象：  </p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> staff = &#123;</span><br><span class="line">	<span class="attr">name</span>:<span class="string">&quot;litong&quot;</span>,</span><br><span class="line">	<span class="attr">age</span>:<span class="number">28</span>,</span><br><span class="line">	<span class="attr">skills</span>: [<span class="string">&#x27;java&#x27;</span>, <span class="string">&#x27;js&#x27;</span>, <span class="string">&#x27;css&#x27;</span>, <span class="string">&#x27;docker&#x27;</span>, <span class="string">&#x27;python&#x27;</span>, <span class="string">&#x27;linux&#x27;</span>, <span class="string">&#x27;k8s&#x27;</span>, <span class="string">&#x27;es&#x27;</span>, <span class="string">&#x27;redis&#x27;</span>, <span class="string">&#x27;MQ&#x27;</span>, <span class="string">&#x27;MySQL&#x27;</span>]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>我们可以这样赋值：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 解构表达式获取值</span></span><br><span class="line"><span class="keyword">const</span> &#123;name,age,skills&#125; = staff;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(name); <span class="comment">// 打印 litong</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(age);  <span class="comment">// 打印 28</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(skills); <span class="comment">// 打印 [&quot;java&quot;, &quot;js&quot;, &quot;css&quot;, &quot;docker&quot;, &quot;python&quot;, &quot;linux&quot;, &quot;k8s&quot;, &quot;es&quot;, &quot;redis&quot;, &quot;MQ&quot;, &quot;MySQL&quot;]</span></span><br><span class="line"><span class="keyword">const</span> &#123;<span class="attr">name</span>:nickname&#125; = staff;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(nickname); <span class="comment">// 如过想要用其它变量接收，需要额外指定别名，同样能够打印 litong</span></span><br></pre></td></tr></table></figure>

<h2 id="2-4-函数优化"><a href="#2-4-函数优化" class="headerlink" title="2.4 函数优化"></a>2.4 函数优化</h2><p>在ES6中，对函数的操作做了优化，使得我们在操作函数时更加的便捷。</p>
<h3 id="2-4-1-函数参数值默认值"><a href="#2-4-1-函数参数值默认值" class="headerlink" title="2.4.1 函数参数值默认值"></a>2.4.1 函数参数值默认值</h3><p>在ES6以前，我们无法给一个函数参数设置默认值，只能采用变通写法：  </p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">add</span>(<span class="params">a , b</span>) &#123;</span><br><span class="line">	b = b || <span class="number">1</span>; <span class="comment">// 判断b是否为空，为空就给默认值1</span></span><br><span class="line">	<span class="keyword">return</span> a + b;</span><br><span class="line">&#125; </span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">add</span>(<span class="number">10</span>));</span><br></pre></td></tr></table></figure>

<p>现在可以这么写：  </p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 给b设置默认值</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">add</span>(<span class="params">a , b = <span class="number">1</span></span>) &#123; </span><br><span class="line">	<span class="keyword">return</span> a + b;</span><br><span class="line">&#125;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">add</span>(<span class="number">10</span>));</span><br></pre></td></tr></table></figure>

<h3 id="2-4-2-箭头函数"><a href="#2-4-2-箭头函数" class="headerlink" title="2.4.2 箭头函数"></a>2.4.2 箭头函数</h3><p>ES6中定义函数的简写方式：  </p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> print = <span class="keyword">function</span> (<span class="params">obj</span>) &#123;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(obj);</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 一个参数的函数可简写为：</span></span><br><span class="line"><span class="keyword">var</span> <span class="title function_">print2</span> = obj =&gt; <span class="variable language_">console</span>.<span class="title function_">log</span>(obj);</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> sum = <span class="keyword">function</span> (<span class="params">a , b</span>) &#123;</span><br><span class="line"><span class="keyword">return</span> a + b;</span><br><span class="line">&#125; </span><br><span class="line"><span class="comment">// 多个参数的函数可简写为：</span></span><br><span class="line"><span class="keyword">var</span> <span class="title function_">sum2</span> = (<span class="params">a,b</span>) =&gt; a+b;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 没有参数时，需要通过()进行占位，代表参数部分</span></span><br><span class="line"><span class="keyword">let</span> <span class="title function_">sayHello</span> = (<span class="params"></span>) =&gt; <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;hello!&quot;</span>);</span><br><span class="line"><span class="title function_">sayHello</span>(); <span class="comment">// 输出hello!</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 代码不止一行，可以用 &#123;&#125; 括起来</span></span><br><span class="line"><span class="keyword">var</span> <span class="title function_">sum3</span> = (<span class="params">a,b</span>) =&gt; &#123;</span><br><span class="line">     b = <span class="number">30</span>;</span><br><span class="line">	<span class="keyword">return</span> a + b;</span><br><span class="line">&#125; </span><br><span class="line"><span class="comment">// 多行，没有返回值</span></span><br><span class="line"><span class="keyword">let</span> <span class="title function_">sayHello</span> = (<span class="params"></span>) =&gt; &#123;</span><br><span class="line">	<span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;hello!&quot;</span>);</span><br><span class="line">	<span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;world!&quot;</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="title function_">sayHello</span>()</span><br></pre></td></tr></table></figure>

<h3 id="2-4-3-对象的函数属性简写"><a href="#2-4-3-对象的函数属性简写" class="headerlink" title="2.4.3 对象的函数属性简写"></a>2.4.3 对象的函数属性简写</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> person = &#123;</span><br><span class="line">	<span class="attr">name</span>: <span class="string">&quot;jack&quot;</span>,</span><br><span class="line">	<span class="comment">// 以前写法：</span></span><br><span class="line">	<span class="attr">eat</span>: <span class="keyword">function</span> (<span class="params">food</span>) &#123;</span><br><span class="line">		<span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>.<span class="property">name</span> + <span class="string">&quot;在吃&quot;</span> + food);</span><br><span class="line">	&#125;,</span><br><span class="line">	<span class="comment">// 箭头函数版：</span></span><br><span class="line">	<span class="attr">eat2</span>: <span class="function"><span class="params">food</span> =&gt;</span> <span class="variable language_">console</span>.<span class="title function_">log</span>(person.<span class="property">name</span> + <span class="string">&quot;在吃&quot;</span> + food), <span class="comment">// 这里拿不到this，就不能this.name</span></span><br><span class="line">	<span class="comment">// 简写版：</span></span><br><span class="line">	<span class="title function_">eat3</span>(<span class="params">food</span>)&#123;</span><br><span class="line">		<span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>.<span class="property">name</span> + <span class="string">&quot;在吃&quot;</span> + food);</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="2-4-4-箭头函数结合解构表达式"><a href="#2-4-4-箭头函数结合解构表达式" class="headerlink" title="2.4.4 箭头函数结合解构表达式"></a>2.4.4 箭头函数结合解构表达式</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> person = &#123;</span><br><span class="line">	<span class="attr">name</span>:<span class="string">&quot;jack&quot;</span>,</span><br><span class="line">	<span class="attr">age</span>:<span class="number">21</span>,</span><br><span class="line">	<span class="attr">language</span>: [<span class="string">&#x27;java&#x27;</span>,<span class="string">&#x27;js&#x27;</span>,<span class="string">&#x27;css&#x27;</span>]</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">hello</span>(<span class="params">person</span>) &#123;</span><br><span class="line">	<span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;hello,&quot;</span> + person.<span class="property">name</span>)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 用箭头函数和解构表达式</span></span><br><span class="line"><span class="keyword">var</span> <span class="title function_">hi</span> = (<span class="params">&#123;name&#125;</span>) =&gt; <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;hello,&quot;</span> + name);</span><br><span class="line"><span class="title function_">hi</span>(person)</span><br></pre></td></tr></table></figure>



<h2 id="2-5-map和reduce"><a href="#2-5-map和reduce" class="headerlink" title="2.5 map和reduce"></a>2.5 map和reduce</h2><p>ES6中，数组新增了map和reduce方法。  </p>
<h3 id="2-5-1-map"><a href="#2-5-1-map" class="headerlink" title="2.5.1 map()"></a>2.5.1 map()</h3><p>map() ：接收一个函数，将原数组中的所有元素用这个函数处理后放入新数组返回。<br>举例：有一个字符串数组，我们希望转为int数组。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> arr = [<span class="string">&#x27;1&#x27;</span>,<span class="string">&#x27;20&#x27;</span>,<span class="string">&#x27;-5&#x27;</span>,<span class="string">&#x27;3&#x27;</span>];</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(arr);  <span class="comment">// 打印[&#x27;1&#x27;, &#x27;20&#x27;, &#x27;-5&#x27;, &#x27;3&#x27;]</span></span><br><span class="line"><span class="keyword">let</span> newArr = arr.<span class="title function_">map</span>(<span class="function"><span class="params">s</span> =&gt;</span> <span class="built_in">parseInt</span>(s));</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(newArr); <span class="comment">// 打印[1, 20, -5, 3]</span></span><br></pre></td></tr></table></figure>

<h3 id="2-5-2-reduce"><a href="#2-5-2-reduce" class="headerlink" title="2.5.2 reduce()"></a>2.5.2 reduce()</h3><p>reduce() ：接收一个函数（必须）和一个初始值（可选），该函数接收两个参数：  </p>
<ul>
<li>第一个参数是上一次reduce处理的结果</li>
<li>第二个参数是数组中要处理的下一个元素  </li>
</ul>
<p>reduce() 会从左到右依次把数组中的元素用reduce处理，并把处理的结果作为下次reduce的第一个参数。如果是<br>第一次，会把前两个元素作为计算参数，或者把用户指定的初始值作为起始参数 。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> arr = [<span class="number">1</span>,<span class="number">20</span>,-<span class="number">5</span>,<span class="number">3</span>]; <span class="comment">// 初始化数组</span></span><br><span class="line">arr.<span class="title function_">reduce</span>(<span class="function">(<span class="params">a, b</span>) =&gt;</span> a + b); <span class="comment">// 计算结果为19</span></span><br><span class="line">arr.<span class="title function_">reduce</span>(<span class="function">(<span class="params">a, b</span>) =&gt;</span> a * b); <span class="comment">// 计算结果为-300</span></span><br><span class="line">arr.<span class="title function_">reduce</span>(<span class="function">(<span class="params">a, b</span>) =&gt;</span> a * b, <span class="number">0</span>); <span class="comment">// 多加个初始值参数，计算结果为0</span></span><br></pre></td></tr></table></figure>

<h2 id="2-6-扩展运算符"><a href="#2-6-扩展运算符" class="headerlink" title="2.6 扩展运算符"></a>2.6 扩展运算符</h2><p>扩展运算符(spread)是三个点(…)， 将一个数组转为用逗号分隔的参数序列 。  </p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">console</span>.<span class="property">log</span> (...[<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>]); <span class="comment">// 1 2 3</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="number">1</span>, ...[<span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>], <span class="number">5</span>); <span class="comment">// 1 2 3 4 5</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">add</span>(<span class="params">x, y</span>) &#123;</span><br><span class="line">	<span class="keyword">return</span> x + y;</span><br><span class="line">&#125; </span><br><span class="line"><span class="keyword">var</span> numbers = [<span class="number">1</span>, <span class="number">2</span>];</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">add</span>(...numbers)); <span class="comment">// 3</span></span><br><span class="line"><span class="comment">// 数组合并</span></span><br><span class="line"><span class="keyword">let</span> arr = [...[<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>],...[<span class="number">4</span>,<span class="number">5</span>,<span class="number">6</span>]];</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(arr); <span class="comment">// [1, 2, 3, 4, 5, 6]</span></span><br><span class="line"><span class="comment">// 与解构表达式结合</span></span><br><span class="line"><span class="keyword">const</span> [first, ...rest] = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">5</span>];</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(first, rest) <span class="comment">// 1 [2, 3, 4, 5]</span></span><br><span class="line"><span class="comment">//将字符串转成数组</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>([...<span class="string">&#x27;hello&#x27;</span>]) <span class="comment">// [&quot;h&quot;, &quot;e&quot;, &quot;l&quot;, &quot;l&quot;, &quot;o&quot;]</span></span><br></pre></td></tr></table></figure>

<h2 id="2-7-Promise"><a href="#2-7-Promise" class="headerlink" title="2.7 Promise"></a>2.7 Promise</h2><h3 id="2-7-1-引入Promise"><a href="#2-7-1-引入Promise" class="headerlink" title="2.7.1 引入Promise"></a>2.7.1 引入Promise</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 需求：封装一个方法，给一个要读取文件的路径，这个方法能帮我读取文件，并把内容返回给我</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> fs = <span class="built_in">require</span>(<span class="string">&#x27;fs&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&#x27;path&#x27;</span>)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 这是普通读取文件的方式,readFile()这个方法是异步方法</span></span><br><span class="line"> fs.<span class="title function_">readFile</span>(path.<span class="title function_">join</span>(__dirname, <span class="string">&#x27;./files/1.txt&#x27;</span>), <span class="string">&#x27;utf-8&#x27;</span>, <span class="function">(<span class="params">err, dataStr</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="comment">// 思考：把err直接throw，合理吗？不应该是交给调用者去处理吗？</span></span><br><span class="line">  <span class="keyword">if</span> (err) <span class="keyword">throw</span> err  </span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(dataStr)</span><br><span class="line">&#125;) </span><br><span class="line"><span class="comment">// 初衷： 给定文件路径，返回读取到的内容</span></span><br><span class="line"><span class="comment">// 我们可以规定一下， callback 中，有两个参数，第一个参数，是 失败的结果；第二个参数是成功的结果；</span></span><br><span class="line"><span class="comment">// 同时，我们规定了： 如果成功后，返回的结果，应该位于 callback 参数的第二个位置，此时， 第一个位置 由于没有出错，所以，放一个 null；  如果失败了，则 第一个位置放 Error对象，第二个位置防止一个 undefined</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">getFileByPath</span>(<span class="params">fpath, callback</span>) &#123;</span><br><span class="line">  fs.<span class="title function_">readFile</span>(fpath, <span class="string">&#x27;utf-8&#x27;</span>, <span class="function">(<span class="params">err, dataStr</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="comment">// 如果报错了，进入if分支后，if后面的代码就没有必要执行了</span></span><br><span class="line">    <span class="keyword">if</span> (err) <span class="keyword">return</span> <span class="title function_">callback</span>(err)</span><br><span class="line">    <span class="comment">// console.log(dataStr)</span></span><br><span class="line">    <span class="comment">// return dataStr</span></span><br><span class="line">    <span class="title function_">callback</span>(<span class="literal">null</span>, dataStr)</span><br><span class="line">  &#125;)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* </span></span><br><span class="line"><span class="comment">	var result = getFileByPath(path.join(__dirname, &#x27;./files/1.txt&#x27;))</span></span><br><span class="line"><span class="comment">	console.log(result) </span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="title function_">getFileByPath</span>(path.<span class="title function_">join</span>(__dirname, <span class="string">&#x27;./files/1.txt&#x27;</span>), <span class="function">(<span class="params">err, dataStr</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="comment">// console.log(dataStr + &#x27;-----&#x27;)</span></span><br><span class="line">  <span class="comment">// 调用者处理异常</span></span><br><span class="line">  <span class="keyword">if</span> (err) <span class="keyword">return</span> <span class="variable language_">console</span>.<span class="title function_">log</span>(err.<span class="property">message</span>)</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(dataStr)</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"></span><br></pre></td></tr></table></figure>



<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 需求： 先读取文件1，再读取文件2，最后再读取文件3</span></span><br><span class="line"><span class="comment">// 回调地狱</span></span><br><span class="line"><span class="comment">// 使用 ES6 中的 Promise，来解决 回调地狱的问题；</span></span><br><span class="line"><span class="comment">// 问： Promise 的本质是要干什么的：就是单纯的为了解决回调地狱问题；并不能帮我们减少代码量；</span></span><br><span class="line"><span class="title function_">getFileByPath</span>(path.<span class="title function_">join</span>(__dirname, <span class="string">&#x27;./files/1.txt&#x27;</span>), <span class="keyword">function</span> (<span class="params">data</span>) &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(data)</span><br><span class="line"></span><br><span class="line">  <span class="title function_">getFileByPath</span>(path.<span class="title function_">join</span>(__dirname, <span class="string">&#x27;./files/2.txt&#x27;</span>), <span class="keyword">function</span> (<span class="params">data</span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(data)</span><br><span class="line"></span><br><span class="line">    <span class="title function_">getFileByPath</span>(path.<span class="title function_">join</span>(__dirname, <span class="string">&#x27;./files/3.txt&#x27;</span>), <span class="keyword">function</span> (<span class="params">data</span>) &#123;</span><br><span class="line">      <span class="variable language_">console</span>.<span class="title function_">log</span>(data)</span><br><span class="line">    &#125;)</span><br><span class="line">  &#125;)</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 1. Promise 是一个 构造函数，既然是构造函数， 那么，我们就可以  new Promise() 得到一个 Promise 的实例；</span></span><br><span class="line"><span class="comment">// 2. 在 Promise 上，有两个函数，分别叫做 resolve（成功之后的回调函数） 和 reject（失败之后的回调函数）</span></span><br><span class="line"><span class="comment">// 3. 在 Promise 构造函数的 Prototype 属性上，有一个 .then() 方法，也就说，只要是 Promise 构造函数创建的实例，都可以访问到 .then() 方法</span></span><br><span class="line"><span class="comment">// 4. Promise 表示一个 异步操作；每当我们 new 一个 Promise 的实例，这个实例，就表示一个具体的异步操作；</span></span><br><span class="line"><span class="comment">// 5. 既然 Promise 创建的实例，是一个异步操作，那么，这个 异步操作的结果，只能有两种状态：</span></span><br><span class="line"><span class="comment">//  5.1 状态1： 异步执行成功了，需要在内部调用 成功的回调函数 resolve 把结果返回给调用者；</span></span><br><span class="line"><span class="comment">//  5.2 状态2： 异步执行失败了，需要在内部调用 失败的回调函数 reject 把结果返回给调用者；</span></span><br><span class="line"><span class="comment">//  5.3 由于 Promise 的实例，是一个异步操作，所以，内部拿到 操作的结果后，无法使用 return 把操作的结果返回给调用者； 这时候，只能使用回调函数的形式，来把 成功 或 失败的结果，返回给调用者；</span></span><br><span class="line"><span class="comment">// 6. 我们可以在 new 出来的 Promise 实例上，调用 .then() 方法，【预先】 为 这个 Promise 异步操作，指定 成功（resolve） 和 失败（reject） 回调函数；</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// 注意：这里 new 出来的 promise， 只是代表 【形式上】的一个异步操作；</span></span><br><span class="line"><span class="comment">// 什么是形式上的异步操作：就是说，我们只知道它是一个异步操作，但是做什么具体的异步事情，目前还不清楚</span></span><br><span class="line"><span class="comment">// var promise = new Promise()</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// 这是一个具体的异步操作，其中，使用 function 指定一个具体的异步操作</span></span><br><span class="line"><span class="comment">/* var promise = new Promise(function()&#123;</span></span><br><span class="line"><span class="comment">  // 这个 function 内部写的就是具体的异步操作！！！</span></span><br><span class="line"><span class="comment">&#125;) */</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> fs = <span class="built_in">require</span>(<span class="string">&#x27;fs&#x27;</span>)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 每当 new 一个 Promise 实例的时候，就会立即 执行这个 异步操作中的代码</span></span><br><span class="line"><span class="comment">// 也就是说，new 的时候，除了能够得到 一个 promise 实例之外，还会立即调用 我们为 Promise 构造函数传递的那个 function，执行这个 function 中的 异步操作代码；</span></span><br><span class="line"><span class="comment">/* var promise = new Promise(function () &#123;</span></span><br><span class="line"><span class="comment">  fs.readFile(&#x27;./files/2.txt&#x27;, &#x27;utf-8&#x27;, (err, dataStr) =&gt; &#123;</span></span><br><span class="line"><span class="comment">    if (err) throw err</span></span><br><span class="line"><span class="comment">    console.log(dataStr)</span></span><br><span class="line"><span class="comment">  &#125;)</span></span><br><span class="line"><span class="comment">&#125;) */</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// 初衷： 给路径，返回读取到的内容</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">getFileByPath</span>(<span class="params">fpath</span>) &#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">new</span> <span class="title class_">Promise</span>(<span class="keyword">function</span> (<span class="params">resolve, reject</span>) &#123;</span><br><span class="line">    fs.<span class="title function_">readFile</span>(fpath, <span class="string">&#x27;utf-8&#x27;</span>, <span class="function">(<span class="params">err, dataStr</span>) =&gt;</span> &#123;</span><br><span class="line"></span><br><span class="line">      <span class="keyword">if</span> (err) <span class="keyword">return</span> <span class="title function_">reject</span>(err)</span><br><span class="line">      <span class="title function_">resolve</span>(dataStr)</span><br><span class="line">    &#125;)</span><br><span class="line">  &#125;)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* getFileByPath(&#x27;./files/2.txt&#x27;)</span></span><br><span class="line"><span class="comment">  .then(function (data) &#123;</span></span><br><span class="line"><span class="comment">    console.log(data + &#x27;-------&#x27;)</span></span><br><span class="line"><span class="comment">  &#125;, function (err) &#123;</span></span><br><span class="line"><span class="comment">    console.log(err.message)</span></span><br><span class="line"><span class="comment">  &#125;) */</span></span><br></pre></td></tr></table></figure>



<h3 id="2-7-2-使用Promise"><a href="#2-7-2-使用Promise" class="headerlink" title="2.7.2 使用Promise"></a>2.7.2 使用Promise</h3><p>所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法<br>上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样<br>的方法进行处理。<br>我们可以通过Promise的构造函数来创建Promise对象，并在内部封装一个异步执行的结果 。</p>
<p>语法：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> promise = <span class="keyword">new</span> <span class="title class_">Promise</span>(<span class="keyword">function</span>(<span class="params">resolve, reject</span>) &#123;</span><br><span class="line">	<span class="comment">// ... 执行异步操作</span></span><br><span class="line">	<span class="keyword">if</span> (<span class="comment">/* 异步操作成功 */</span>)&#123;</span><br><span class="line">		<span class="title function_">resolve</span>(value);<span class="comment">// 调用resolve，代表Promise将返回成功的结果</span></span><br><span class="line">	&#125; <span class="keyword">else</span> &#123;</span><br><span class="line">		<span class="title function_">reject</span>(error);<span class="comment">// 调用reject，代表Promise会返回失败结果</span></span><br><span class="line">	&#125;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<p>  这样，在promise中就封装了一段异步执行的结果。  </p>
<p>如果我们想要等待异步执行完成，做一些事情，我们可以通过promise的then方法来实现,语法：  </p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">promise.<span class="title function_">then</span>(<span class="keyword">function</span>(<span class="params">value</span>)&#123;</span><br><span class="line">	<span class="comment">// 异步执行成功后的回调</span></span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<p>如果想要处理promise异步执行失败的事件，还可以跟上catch：  </p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">promise.<span class="title function_">then</span>(<span class="keyword">function</span>(<span class="params">value</span>)&#123;</span><br><span class="line">	<span class="comment">// 异步执行成功后的回调</span></span><br><span class="line">&#125;).<span class="title function_">catch</span>(<span class="keyword">function</span>(<span class="params">error</span>)&#123;</span><br><span class="line">	<span class="comment">// 异步执行失败后的回调</span></span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<p>示例：  </p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> p = <span class="keyword">new</span> <span class="title class_">Promise</span>(<span class="keyword">function</span> (<span class="params">resolve, reject</span>) &#123;</span><br><span class="line">	<span class="comment">// 这里我们用定时任务模拟异步</span></span><br><span class="line">	<span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">		<span class="keyword">const</span> num = <span class="title class_">Math</span>.<span class="title function_">random</span>();</span><br><span class="line">		<span class="comment">// 随机返回成功或失败</span></span><br><span class="line">		<span class="keyword">if</span> (num &lt; <span class="number">0.5</span>) &#123;</span><br><span class="line">			<span class="title function_">resolve</span>(<span class="string">&quot;成功！num:&quot;</span> + num); <span class="comment">// 成功！num:0.4884028656598369</span></span><br><span class="line">		&#125; <span class="keyword">else</span> &#123;</span><br><span class="line">			<span class="title function_">reject</span>(<span class="string">&quot;出错了！num:&quot;</span> + num);</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;, <span class="number">300</span>)</span><br><span class="line">&#125;);</span><br><span class="line"><span class="comment">// 调用promise</span></span><br><span class="line">p.<span class="title function_">then</span>(<span class="keyword">function</span> (<span class="params">msg</span>) &#123;</span><br><span class="line">	<span class="variable language_">console</span>.<span class="title function_">log</span>(msg); </span><br><span class="line">&#125;).<span class="title function_">catch</span>(<span class="keyword">function</span> (<span class="params">msg</span>) &#123;</span><br><span class="line">	<span class="variable language_">console</span>.<span class="title function_">log</span>(msg);</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<h3 id="2-7-3-解决回调地狱"><a href="#2-7-3-解决回调地狱" class="headerlink" title="2.7.3 解决回调地狱"></a>2.7.3 解决回调地狱</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> fs = <span class="built_in">require</span>(<span class="string">&#x27;fs&#x27;</span>)</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">getFileByPath</span>(<span class="params">fpath</span>) &#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">new</span> <span class="title class_">Promise</span>(<span class="keyword">function</span> (<span class="params">resolve, reject</span>) &#123;</span><br><span class="line">    fs.<span class="title function_">readFile</span>(fpath, <span class="string">&#x27;utf-8&#x27;</span>, <span class="function">(<span class="params">err, dataStr</span>) =&gt;</span> &#123;</span><br><span class="line"></span><br><span class="line">      <span class="keyword">if</span> (err) <span class="keyword">return</span> <span class="title function_">reject</span>(err)</span><br><span class="line">      <span class="title function_">resolve</span>(dataStr)</span><br><span class="line"></span><br><span class="line">    &#125;)</span><br><span class="line">  &#125;)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 先读取文件1，在读取2，最后读取3</span></span><br><span class="line"><span class="comment">// 注意： 通过 .then 指定 回调函数的时候，成功的 回调函数，必须传，但是，失败的回调，可以省略不传</span></span><br><span class="line"><span class="comment">// 这是一个 错误的示范，千万不要这么用； 硬是把 法拉利，开成了 拖拉机；</span></span><br><span class="line"><span class="comment">/* getFileByPath(&#x27;./files/1.txt&#x27;)</span></span><br><span class="line"><span class="comment">  .then(function (data) &#123;</span></span><br><span class="line"><span class="comment">    console.log(data)</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">    getFileByPath(&#x27;./files/2.txt&#x27;)</span></span><br><span class="line"><span class="comment">      .then(function (data) &#123;</span></span><br><span class="line"><span class="comment">        console.log(data)</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">        getFileByPath(&#x27;./files/3.txt&#x27;)</span></span><br><span class="line"><span class="comment">          .then(function (data) &#123;</span></span><br><span class="line"><span class="comment">            console.log(data)</span></span><br><span class="line"><span class="comment">          &#125;)</span></span><br><span class="line"><span class="comment">      &#125;)</span></span><br><span class="line"><span class="comment">  &#125;) */</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 读取文件1</span></span><br><span class="line"><span class="comment">// 在上一个 .then 中，返回一个新的 promise 实例，可以继续用下一个 .then 来处理</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// 如果 ，前面的 Promise 执行失败，我们不想让后续的Promise 操作被终止，可以为 每个 promise 指定 失败的回调</span></span><br><span class="line"><span class="comment">/* getFileByPath(&#x27;./files/11.txt&#x27;)</span></span><br><span class="line"><span class="comment">  .then(function (data) &#123;</span></span><br><span class="line"><span class="comment">    console.log(data)</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">    // 读取文件2</span></span><br><span class="line"><span class="comment">    return getFileByPath(&#x27;./files/2.txt&#x27;)</span></span><br><span class="line"><span class="comment">  &#125;, function (err) &#123;</span></span><br><span class="line"><span class="comment">    console.log(&#x27;这是失败的结果：&#x27; + err.message)</span></span><br><span class="line"><span class="comment">    // return 一个 新的 Promise</span></span><br><span class="line"><span class="comment">    return getFileByPath(&#x27;./files/2.txt&#x27;)</span></span><br><span class="line"><span class="comment">  &#125;)</span></span><br><span class="line"><span class="comment">  .then(function (data) &#123;</span></span><br><span class="line"><span class="comment">    console.log(data)</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">    return getFileByPath(&#x27;./files/3.txt&#x27;)</span></span><br><span class="line"><span class="comment">  &#125;)</span></span><br><span class="line"><span class="comment">  .then(function (data) &#123;</span></span><br><span class="line"><span class="comment">    console.log(data)</span></span><br><span class="line"><span class="comment">  &#125;).then(function (data) &#123;</span></span><br><span class="line"><span class="comment">    console.log(data)</span></span><br><span class="line"><span class="comment">  &#125;) */</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// console.log(&#x27;OKOKOK&#x27;)</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// 当 我们有这样的需求： 哪怕前面的 Promise 执行失败了，但是，不要影响后续 promise 的正常执行，此时，我们可以单独为 每个 promise，通过 .then 指定一下失败的回调；</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 有时候，我们有这样的需求，个上面的需求刚好相反：如果 后续的Promise 执行，依赖于 前面 Promise 执行的结果，如果前面的失败了，则后面的就没有继续执行下去的意义了，此时，我们想要实现，一旦有报错，则立即终止所有 Promise的执行；</span></span><br><span class="line"></span><br><span class="line"><span class="title function_">getFileByPath</span>(<span class="string">&#x27;./files/1.txt&#x27;</span>)</span><br><span class="line">  .<span class="title function_">then</span>(<span class="keyword">function</span> (<span class="params">data</span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(data)</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 读取文件2</span></span><br><span class="line">    <span class="keyword">return</span> <span class="title function_">getFileByPath</span>(<span class="string">&#x27;./files/22.txt&#x27;</span>)</span><br><span class="line">  &#125;)</span><br><span class="line">  .<span class="title function_">then</span>(<span class="keyword">function</span> (<span class="params">data</span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(data)</span><br><span class="line"></span><br><span class="line">    <span class="keyword">return</span> <span class="title function_">getFileByPath</span>(<span class="string">&#x27;./files/3.txt&#x27;</span>)</span><br><span class="line">  &#125;)</span><br><span class="line">  .<span class="title function_">then</span>(<span class="keyword">function</span> (<span class="params">data</span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(data)</span><br><span class="line">  &#125;)</span><br><span class="line">  .<span class="title function_">catch</span>(<span class="keyword">function</span> (<span class="params">err</span>) &#123; <span class="comment">// catch 的作用： 如果前面有任何的 Promise 执行失败，则立即终止所有 promise 的执行，并 马上进入 catch 去处理 Promise中 抛出的异常；</span></span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;这是自己的处理方式：&#x27;</span> + err.<span class="property">message</span>)</span><br><span class="line">  &#125;)</span><br></pre></td></tr></table></figure>

<h3 id="2-7-4-JQuery-Ajax-使用Promise"><a href="#2-7-4-JQuery-Ajax-使用Promise" class="headerlink" title="2.7.4 JQuery Ajax 使用Promise"></a>2.7.4 JQuery Ajax 使用Promise</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;button&quot;</span> <span class="attr">value</span>=<span class="string">&quot;获取数据&quot;</span> <span class="attr">id</span>=<span class="string">&quot;btn&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;https://cdn.bootcss.com/jquery/3.4.1/jquery.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">        $(<span class="keyword">function</span> (<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">            $(<span class="string">&#x27;#btn&#x27;</span>).<span class="title function_">on</span>(<span class="string">&#x27;click&#x27;</span>, <span class="keyword">function</span> (<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">                $.<span class="title function_">ajax</span>(&#123;</span></span><br><span class="line"><span class="language-javascript">                    <span class="attr">url</span>: <span class="string">&#x27;http://192.168.5.137:9999/data.json&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">                    <span class="attr">type</span>: <span class="string">&#x27;get&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">                    <span class="attr">dataType</span>: <span class="string">&#x27;json&#x27;</span></span></span><br><span class="line"><span class="language-javascript">                &#125;).<span class="title function_">then</span>(<span class="keyword">function</span> (<span class="params">data</span>) &#123;</span></span><br><span class="line"><span class="language-javascript">                    <span class="variable language_">console</span>.<span class="title function_">log</span>(data)</span></span><br><span class="line"><span class="language-javascript">                &#125;)</span></span><br><span class="line"><span class="language-javascript">            &#125;)</span></span><br><span class="line"><span class="language-javascript">        &#125;);</span></span><br><span class="line"><span class="language-javascript">    </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>



<h2 id="2-8-set和map"><a href="#2-8-set和map" class="headerlink" title="2.8 set和map"></a>2.8 set和map</h2><p>ES6提供了Set和Map的数据结构。<br>Set，本质与数组类似。不同在于Set中只能保存不同元素，如果元素相同会被忽略。和Java中的Set集合非常相似。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// Set构造函数可以接收一个数组或空</span></span><br><span class="line"><span class="keyword">let</span> set = <span class="keyword">new</span> <span class="title class_">Set</span>();</span><br><span class="line">set.<span class="title function_">add</span>(<span class="number">1</span>);<span class="comment">// [1]</span></span><br><span class="line"><span class="keyword">let</span> set2 = <span class="keyword">new</span> <span class="title class_">Set</span>([<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>,<span class="number">5</span>,<span class="number">5</span>]); <span class="comment">// 接收数组得到[2,3,4,5]</span></span><br><span class="line">set.<span class="title function_">add</span>(<span class="number">1</span>);<span class="comment">// 添加</span></span><br><span class="line">set.<span class="title function_">clear</span>();<span class="comment">// 清空</span></span><br><span class="line">set.<span class="title function_">delete</span>(<span class="number">2</span>);<span class="comment">// 删除指定元素</span></span><br><span class="line">set.<span class="title function_">has</span>(<span class="number">2</span>); <span class="comment">// 判断是否存在</span></span><br><span class="line">set.<span class="title function_">forEach</span>(<span class="keyword">function</span>(<span class="params"></span>)&#123;&#125;)<span class="comment">//遍历元素</span></span><br><span class="line">set.<span class="property">size</span>; <span class="comment">// 元素个数。是属性，不是方法</span></span><br></pre></td></tr></table></figure>

<p>map，本质是与Object类似的结构。不同在于，Object强制规定key只能是字符串。而Map结构的key可以是任意对<br>象。即：  </p>
<ul>
<li>object是 &lt;string,object&gt;集合</li>
<li>map是&lt;object,object&gt;集合  </li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// map接收一个数组，数组中的元素是键值对数组</span></span><br><span class="line"><span class="keyword">const</span> map = <span class="keyword">new</span> <span class="title class_">Map</span>([</span><br><span class="line">	[<span class="string">&#x27;key1&#x27;</span>,<span class="string">&#x27;value1&#x27;</span>],</span><br><span class="line">	[<span class="string">&#x27;key2&#x27;</span>,<span class="string">&#x27;value2&#x27;</span>],</span><br><span class="line">])</span><br><span class="line"><span class="keyword">const</span> set = <span class="keyword">new</span> <span class="title class_">Set</span>([</span><br><span class="line">	[<span class="string">&#x27;key1&#x27;</span>,<span class="string">&#x27;value1&#x27;</span>],</span><br><span class="line">	[<span class="string">&#x27;key2&#x27;</span>,<span class="string">&#x27;value2&#x27;</span>],</span><br><span class="line">])</span><br><span class="line"><span class="keyword">const</span> map2 = <span class="keyword">new</span> <span class="title class_">Map</span>(set) <span class="comment">// 或者接收一个set</span></span><br><span class="line"><span class="keyword">const</span> map3 = <span class="keyword">new</span> <span class="title class_">Map</span>(map); <span class="comment">// 或者其它map</span></span><br><span class="line"></span><br><span class="line">map.<span class="title function_">set</span>(key, value);<span class="comment">// 添加</span></span><br><span class="line">map.<span class="title function_">clear</span>(); <span class="comment">// 清空</span></span><br><span class="line">map.<span class="title function_">delete</span>(key);<span class="comment">// 删除指定元素</span></span><br><span class="line">map.<span class="title function_">has</span>(key); <span class="comment">// 判断是否存在</span></span><br><span class="line">map.<span class="title function_">forEach</span>(<span class="keyword">function</span>(<span class="params">key,value</span>)&#123;&#125;) <span class="comment">// 遍历元素</span></span><br><span class="line">map.<span class="property">size</span>; <span class="comment">// 元素个数。是属性，不是方法</span></span><br><span class="line">map.<span class="title function_">values</span>() <span class="comment">// 获取value的迭代器</span></span><br><span class="line">map.<span class="title function_">keys</span>() <span class="comment">// 获取key的迭代器</span></span><br><span class="line">map.<span class="title function_">entries</span>() <span class="comment">// 获取entry的迭代器</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">let</span> key <span class="keyword">of</span> map.<span class="title function_">keys</span>()) &#123;  <span class="comment">// 遍历</span></span><br><span class="line">	<span class="variable language_">console</span>.<span class="title function_">log</span>(key);</span><br><span class="line">&#125; </span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(...map.<span class="title function_">values</span>()); <span class="comment">//通过扩展运算符进行展开</span></span><br></pre></td></tr></table></figure>



<h2 id="2-9-class的基本语法"><a href="#2-9-class的基本语法" class="headerlink" title="2.9 class的基本语法"></a>2.9 class的基本语法</h2><p>JavaScript 语言的传统方法是通过构造函数定义井生成新对象。ES6中引入了class的概念，通过class关键字自定义<br>类。  和Java定义类的方式类似，基本用法如下：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">class</span> <span class="title class_">User</span> &#123;  <span class="comment">// 定义一个class</span></span><br><span class="line">	<span class="title function_">constructor</span>(<span class="params">name, age = <span class="number">20</span></span>)&#123; <span class="comment">// 构造方法</span></span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">name</span> = name; <span class="comment">// 添加属性并且赋值</span></span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">age</span> = age;</span><br><span class="line">	&#125; </span><br><span class="line">    <span class="title function_">sayHello</span>(<span class="params"></span>)&#123; <span class="comment">// 定义方法</span></span><br><span class="line">		<span class="keyword">return</span> <span class="string">&quot;hello&quot;</span>;</span><br><span class="line">	&#125;</span><br><span class="line">	<span class="keyword">static</span> <span class="title function_">isAdult</span>(<span class="params">age</span>)&#123; <span class="comment">//静态方法</span></span><br><span class="line">		<span class="keyword">if</span>(age &gt;= <span class="number">18</span>)&#123;</span><br><span class="line">			<span class="keyword">return</span> <span class="string">&quot;成年人&quot;</span>;</span><br><span class="line">		&#125;</span><br><span class="line">         <span class="keyword">return</span> <span class="string">&quot;未成年人&quot;</span>;</span><br><span class="line">	&#125;</span><br><span class="line">&#125; </span><br><span class="line"><span class="keyword">let</span> user = <span class="keyword">new</span> <span class="title class_">User</span>(<span class="string">&quot;张三&quot;</span>);</span><br><span class="line"><span class="comment">// 测试</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(user); <span class="comment">// User &#123;name: &quot;张三&quot;, age: 20&#125;</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(user.<span class="title function_">sayHello</span>()); <span class="comment">// hello</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">User</span>.<span class="title function_">isAdult</span>(<span class="number">20</span>)); <span class="comment">// 成年人</span></span><br></pre></td></tr></table></figure>

<p>类的继承:</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">class</span> <span class="title class_">User</span> &#123;  </span><br><span class="line">	<span class="title function_">constructor</span>(<span class="params">name, age = <span class="number">20</span></span>)&#123; <span class="comment">// 构造方法</span></span><br><span class="line">		<span class="variable language_">this</span>.<span class="property">name</span> = name; <span class="comment">// 添加属性并且赋值</span></span><br><span class="line">		<span class="variable language_">this</span>.<span class="property">age</span> = age;</span><br><span class="line">	&#125; </span><br><span class="line">    <span class="title function_">sayHello</span>(<span class="params"></span>)&#123;</span><br><span class="line">		<span class="keyword">return</span> <span class="string">&quot;hello&quot;</span>; <span class="comment">// 定义方法</span></span><br><span class="line">	&#125; </span><br><span class="line">    <span class="keyword">static</span> <span class="title function_">isAdult</span>(<span class="params">age</span>)&#123; <span class="comment">//静态方法</span></span><br><span class="line">		<span class="keyword">if</span>(age &gt;= <span class="number">18</span>)&#123;</span><br><span class="line">			<span class="keyword">return</span> <span class="string">&quot;成年人&quot;</span>;</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="keyword">return</span> <span class="string">&quot;未成年人&quot;</span>;</span><br><span class="line">    &#125;</span><br><span class="line">&#125; </span><br><span class="line"><span class="keyword">class</span> <span class="title class_">ZhangSan</span> <span class="keyword">extends</span> <span class="title class_ inherited__">User</span> &#123;  <span class="comment">// 类的继承</span></span><br><span class="line">	<span class="title function_">constructor</span>(<span class="params"></span>)&#123;</span><br><span class="line">		<span class="variable language_">super</span>(<span class="string">&quot;张三&quot;</span>, <span class="number">30</span>); <span class="comment">//如果父类中的构造方法有参数，那么子类必须通过super调用父类的构造方法</span></span><br><span class="line">		<span class="variable language_">this</span>.<span class="property">address</span> = <span class="string">&quot;上海&quot;</span>; <span class="comment">//设置子类中的属性，位置必须处于super下面</span></span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 测试</span></span><br><span class="line"><span class="keyword">let</span> zs = <span class="keyword">new</span> <span class="title class_">ZhangSan</span>();</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(zs.<span class="property">name</span>, zs.<span class="property">address</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(zs.<span class="title function_">sayHello</span>());</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">ZhangSan</span>.<span class="title function_">isAdult</span>(<span class="number">20</span>));</span><br></pre></td></tr></table></figure>

<h2 id="2-10-Generator迭代器"><a href="#2-10-Generator迭代器" class="headerlink" title="2.10 Generator迭代器"></a>2.10 Generator迭代器</h2><p>Generator 函数是 ES6 提供的 一种异步编程解决方案，语法行为与传统函数完全不同 。<br>Generator函数有两个特征: </p>
<ul>
<li>一是 function命令与函数名之间有一个星号:</li>
<li>二是函数体内部使用 yield吾句定义不同的<br>内部状态。  </li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span>* hello () &#123; </span><br><span class="line">	<span class="keyword">yield</span> <span class="string">&quot;hello&quot;</span>;</span><br><span class="line">	<span class="keyword">yield</span> <span class="string">&quot;world&quot;</span>;</span><br><span class="line">	<span class="keyword">return</span> <span class="string">&quot;done&quot;</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> h = <span class="title function_">hello</span>();</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(h.<span class="title function_">next</span>()); <span class="comment">//&#123;value: &quot;hello&quot;, done: false&#125;</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(h.<span class="title function_">next</span>()); <span class="comment">//&#123;value: &quot;world&quot;, done: false&#125;</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(h.<span class="title function_">next</span>()); <span class="comment">//&#123;value: &quot;done&quot;, done: true&#125;</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(h.<span class="title function_">next</span>()); <span class="comment">//&#123;value: undefined, done: true</span></span><br></pre></td></tr></table></figure>

<p>可以看到，通过hello()返回的h对象，每调用一次next()方法返回一个对象，该对象包含了value值和done状态。直到<br>遇到return关键字或者函数执行完毕，这个时候返回的状态为ture，表示已经执行结束了。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span>* hello () &#123;</span><br><span class="line">	<span class="keyword">yield</span> <span class="string">&quot;hello&quot;</span>;</span><br><span class="line">	<span class="keyword">yield</span> <span class="string">&quot;world&quot;</span>;</span><br><span class="line">	<span class="keyword">return</span> <span class="string">&quot;done&quot;</span>;</span><br><span class="line">&#125; </span><br><span class="line"><span class="keyword">let</span> h = <span class="title function_">hello</span>();</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">let</span> obj <span class="keyword">of</span> h) &#123;</span><br><span class="line">	<span class="variable language_">console</span>.<span class="title function_">log</span>(obj);  <span class="comment">// 依次打印hello和world</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="2-11-修饰器"><a href="#2-11-修饰器" class="headerlink" title="2.11 修饰器"></a>2.11 修饰器</h2><p>修饰器(Decorator)是一个函数， 用来修改类的行为。 ES2017 引入了这项功能， 目前 Babel 转码器己经支持。  其实这个很像我们Java的注解。我们来看下面例子：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">@T <span class="comment">//通过@符号进行引用该方法，类似java中的注解</span></span><br><span class="line"><span class="keyword">class</span> <span class="title class_">User</span> &#123;</span><br><span class="line">	<span class="title function_">constructor</span>(<span class="params">name, age = <span class="number">20</span></span>)&#123;</span><br><span class="line">		<span class="variable language_">this</span>.<span class="property">name</span> = name;</span><br><span class="line">		<span class="variable language_">this</span>.<span class="property">age</span> = age;</span><br><span class="line">	&#125;</span><br><span class="line">&#125; </span><br><span class="line"><span class="keyword">function</span> <span class="title function_">T</span>(<span class="params">target</span>) &#123; <span class="comment">//定义一个普通的方法</span></span><br><span class="line">	<span class="variable language_">console</span>.<span class="title function_">log</span>(target); <span class="comment">//target对象为修饰的目标对象，这里是User对象</span></span><br><span class="line">	target.<span class="property">country</span> = <span class="string">&quot;中国&quot;</span>; <span class="comment">//为User类添加一个静态属性country</span></span><br><span class="line">&#125; </span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">User</span>.<span class="property">country</span>); <span class="comment">// 理论上打印出country属性值，但实际上报错:Uncaught SyntaxError: Invalid or unexpected token</span></span><br></pre></td></tr></table></figure>

<p>如果上述代码直接在浏览器运行会报错，原因是，在ES6中，并没有支持该用法，在ES2017中才有，所以我们不能直接运行了，需要进行编码后再运行。<br>转码的意思是：将ES6或ES2017转为ES5执行。类似这样 :</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//转码前</span></span><br><span class="line">input .<span class="title function_">map</span>(<span class="function"><span class="params">item</span> =&gt;</span>item + <span class="number">1</span>);</span><br><span class="line"><span class="comment">//转码后</span></span><br><span class="line">input.<span class="title function_">map</span>(<span class="keyword">function</span> (<span class="params">item</span>) &#123;</span><br><span class="line">	<span class="keyword">return</span> item + <span class="number">1</span>;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<h2 id="2-12-转码器"><a href="#2-12-转码器" class="headerlink" title="2.12 转码器"></a>2.12 转码器</h2><ul>
<li>Babel (babeljs.io)是一个广为使用的 ES6 转码器，可以将 ES6 代码转为 ES5 代码，从而 在浏览器或其他环境执<br>行 。</li>
<li>Google 公司的 Traceur 转码器 Cgithub.com/google/traceur-compiler)，也可以将 ES6 代码转为ES5的代码。</li>
</ul>
<p>这2款都是非常优秀的转码工具，在这里我不会使用上述两个工具，而是会使用阿里的开源企业级react框架转码工具：UmiJS。 Vue CLI脚架的默认转码器是Babel。</p>
<h3 id="2-12-1-UmiJS转码器"><a href="#2-12-1-UmiJS转码器" class="headerlink" title="2.12.1 UmiJS转码器"></a>2.12.1 UmiJS转码器</h3><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta prompt_"># </span><span class="language-bash">首先需要安装Node.js环境，Node环境自行百度</span></span><br><span class="line">C:\Users\LT&gt;node -v   // 确保node环境正常</span><br><span class="line">v12.13.0</span><br><span class="line"><span class="meta prompt_">#</span><span class="language-bash">接下来，开始安装yarn，其中tyarn使用的是npm.taobao.org的源，速度要快一些</span></span><br><span class="line"><span class="meta prompt_">#</span><span class="language-bash">可以把yarn看做了优化了的npm</span></span><br><span class="line">npm i yarn tyarn -g #-g 是指全局安装</span><br><span class="line">tyarn -v #进行测试，如果能够正常输出版本信息则说明安装成功了</span><br><span class="line">1.21.1 # 安装成功</span><br><span class="line"><span class="meta prompt_">#</span><span class="language-bash">如果安装失败，是由于将yarn添加到环境变量中导致</span></span><br><span class="line"><span class="meta prompt_">#</span><span class="language-bash">下面开始安装umi</span></span><br><span class="line">tyarn global add umi</span><br><span class="line">umi #进行测试，如果找不到umi命令，继续</span><br><span class="line">yarn global bin # 查看umi命令所处的路径，我的路径是：C:\Users\LT\AppData\Local\Yarn\bin，然后将该路径添加到环境变量里就可以了</span><br><span class="line">C:\Users\LT&gt;umi -v</span><br><span class="line">2.12.9  # umi的版本</span><br></pre></td></tr></table></figure>

<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta prompt_">#</span><span class="language-bash">通过初始化命令将生成package.json文件，它是 NodeJS 约定的用来存放项目的信息和配置等信息的文件。</span></span><br><span class="line">tyarn init -y</span><br><span class="line"><span class="meta prompt_">#</span><span class="language-bash">通过umi命令创建index.js文件</span></span><br><span class="line">umi g page index #可以看到在pages下创建好了index.js和index.css文件</span><br><span class="line"><span class="meta prompt_">#</span><span class="language-bash">将下面内存拷贝到index.js文件中进行测试</span></span><br><span class="line">@T //通过@符号进行引用该方法，类似java中的注解</span><br><span class="line">class User &#123;</span><br><span class="line">	constructor(name, age = 20)&#123;</span><br><span class="line">		this.name = name;</span><br><span class="line">		this.age = age;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br><span class="line">function T(target) &#123; //定义一个普通的方法</span><br><span class="line">	console.log(target); //target对象为修饰的目标对象，这里是User对象</span><br><span class="line">	target.country = &quot;中国&quot;; //为User类添加一个静态属性country</span><br><span class="line">	target.city = &quot;上海&quot;; //为User类添加一个静态属性city</span><br><span class="line">&#125;</span><br><span class="line">console.log(User.country + &#x27; - &#x27; + User.city); //打印出country和city属性值，中国 - 上海</span><br><span class="line"><span class="meta prompt_">#</span><span class="language-bash">通过命令行启动umi的后台服务,用于本地开发</span></span><br><span class="line">umi dev</span><br><span class="line"><span class="meta prompt_">#</span><span class="language-bash">通过浏览器进行访问：http://localhost:8000/，查看效果</span></span><br><span class="line"><span class="meta prompt_">#</span><span class="language-bash">值得注意的是，这里访问的是umi的后台服务，不是idea提供的服务</span></span><br></pre></td></tr></table></figure>

<p>查看转码后的index.js文件，找到自己写的那个代码,也就是对对象包裹了一层，没什么高大上的:</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> _class;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> <span class="comment">//通过@符号进行引用该方法，类似java中的注解</span></span><br><span class="line"><span class="title class_">User</span> = <span class="title function_">T</span>(_class = <span class="keyword">class</span> <span class="title class_">User</span> &#123;</span><br><span class="line">  <span class="title function_">constructor</span>(<span class="params">name</span>) &#123;</span><br><span class="line">    <span class="keyword">var</span> age = <span class="variable language_">arguments</span>.<span class="property">length</span> &gt; <span class="number">1</span> &amp;&amp; <span class="variable language_">arguments</span>[<span class="number">1</span>] !== <span class="literal">undefined</span> ? <span class="variable language_">arguments</span>[<span class="number">1</span>] : <span class="number">20</span>;</span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">name</span> = name;</span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">age</span> = age;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">&#125;) || _class;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">T</span>(<span class="params">target</span>) &#123;</span><br><span class="line">  <span class="comment">//定义一个普通的方法</span></span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(target); <span class="comment">//target对象为修饰的目标对象，这里是User对象</span></span><br><span class="line"></span><br><span class="line">  target.<span class="property">country</span> = <span class="string">&quot;中国&quot;</span>; <span class="comment">//为User类添加一个静态属性country</span></span><br><span class="line"></span><br><span class="line">  target.<span class="property">city</span> = <span class="string">&quot;上海&quot;</span>; <span class="comment">//为User类添加一个静态属性city</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">User</span>.<span class="property">country</span> + <span class="string">&#x27; - &#x27;</span> + <span class="title class_">User</span>.<span class="property">city</span>); <span class="comment">//打印出country和city属性值</span></span><br></pre></td></tr></table></figure>

<h3 id="2-12-2-Babel-转码器"><a href="#2-12-2-Babel-转码器" class="headerlink" title="2.12.2  Babel 转码器"></a>2.12.2  Babel 转码器</h3><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">npm install -g babel-cli  # 全局安装babel-cli</span><br><span class="line">npm init # 初始化项目</span><br><span class="line">npm install --save-dev babel-preset-es2015  # 安装es2015 babel规范， 当前你可以安装其他版本的规范</span><br><span class="line">// ES7不同阶段语法提案的转码规则（共有4个阶段），选装一个</span><br><span class="line">npm install --save-dev babel-preset-stage-0</span><br><span class="line">npm install --save-dev babel-preset-stage-1</span><br><span class="line">npm install --save-dev babel-preset-stage-2</span><br><span class="line">npm install --save-dev babel-preset-stage-3</span><br><span class="line"></span><br><span class="line">npm install babel-plugin-transform-decorators-legacy -g  # es7的装饰器babel转码插件</span><br><span class="line">type nul &gt; .babelrc # Windows创建.babelrc文件，Linux使用touch .babelrc命令创建该文件</span><br><span class="line"><span class="meta prompt_"># </span><span class="language-bash">将下面的json复制到.babelrc文件里</span></span><br><span class="line">&#123;</span><br><span class="line">  &quot;presets&quot;: [</span><br><span class="line">    &quot;es2015&quot;,</span><br><span class="line">    &quot;stage-0&quot;</span><br><span class="line">  ],</span><br><span class="line">  &quot;plugins&quot;: [&quot;transform-decorators-legacy&quot;]  </span><br><span class="line">&#125;</span><br><span class="line"><span class="meta prompt_"># </span><span class="language-bash">文件所在目录   转码后的文件为index-after.js</span></span><br><span class="line">babel ./index.js -o ./index-after.js</span><br></pre></td></tr></table></figure>

<p>查看index-after.js文件：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&quot;use strict&quot;</span>; <span class="comment">// 开启es6的严格模式</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> _class;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">_classCallCheck</span>(<span class="params">instance, Constructor</span>) &#123; <span class="keyword">if</span> (!(instance <span class="keyword">instanceof</span> <span class="title class_">Constructor</span>)) &#123; <span class="keyword">throw</span> <span class="keyword">new</span> <span class="title class_">TypeError</span>(<span class="string">&quot;Cannot call a class as a function&quot;</span>); &#125; &#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> <span class="title class_">User</span> = <span class="title function_">T</span>(_class = <span class="keyword">function</span> <span class="title function_">User</span>(<span class="params">name</span>) &#123;</span><br><span class="line">	<span class="keyword">var</span> age = <span class="variable language_">arguments</span>.<span class="property">length</span> &gt; <span class="number">1</span> &amp;&amp; <span class="variable language_">arguments</span>[<span class="number">1</span>] !== <span class="literal">undefined</span> ? <span class="variable language_">arguments</span>[<span class="number">1</span>] : <span class="number">20</span>;</span><br><span class="line"></span><br><span class="line">	<span class="title function_">_classCallCheck</span>(<span class="variable language_">this</span>, <span class="title class_">User</span>);</span><br><span class="line"></span><br><span class="line">	<span class="variable language_">this</span>.<span class="property">name</span> = name;</span><br><span class="line">	<span class="variable language_">this</span>.<span class="property">age</span> = age;</span><br><span class="line">&#125;) || _class;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">T</span>(<span class="params">target</span>) &#123;</span><br><span class="line">	<span class="comment">//定义一个普通的方法</span></span><br><span class="line">	<span class="variable language_">console</span>.<span class="title function_">log</span>(target); <span class="comment">//target对象为修饰的目标对象，这里是User对象</span></span><br><span class="line">	target.<span class="property">country</span> = <span class="string">&quot;中国&quot;</span>; <span class="comment">//为User类添加一个静态属性country</span></span><br><span class="line">	target.<span class="property">city</span> = <span class="string">&quot;上海&quot;</span>; <span class="comment">//为User类添加一个静态属性city</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">User</span>.<span class="property">country</span> + <span class="string">&#x27; - &#x27;</span> + <span class="title class_">User</span>.<span class="property">city</span>); <span class="comment">//打印出country和city属性值，中国 - 上海</span></span><br></pre></td></tr></table></figure>

<h3 id="2-12-3-在线转码"><a href="#2-12-3-在线转码" class="headerlink" title="2.12.3 在线转码"></a>2.12.3 在线转码</h3><p><a target="_blank" rel="noopener" href="https://babeljs.io/repl/#?browsers=&build=&builtIns=false&spec=false&loose=false&code_lz=AIFQBA9BhYCY4_HIMm9DvyobfjAyEYVH1AUroU-jCdpoKs2gMP-DePoDzyAVgIYBuVgtHKAhboBc2gx5EBQAxgDZUDOfMAFU-AUwBOYAN7sAkJwD2AOz4AXcQFdOqheIAUSqgFtRAGjBUA5qLABeMACYADAEoZs2aoAWASz4A6QxM7MCDRAG45T18Aqxt7OMjZAF92VIAzDSVtH2UwED1VKnFrVRdpSAhALO1ASTlAADlAKjlAOzNoRkI5RRUFblF_bgVLQuLSl3DKopLRVUBP7UBDGMAuOUA7-UAHTMZAO7dAcAs5okBN-MAZxMB6MxEJObkJ0v9FLPUATxCAInpAX7V7sah54_ESQG_bQAKlRsAmumAQANAHo6gHIDK5KW5nYZTS4-VR3ez3QBQcoB3W1elQ-Yi-f0BoIhCJuaS4yj43V6_UGn0uCmu4juAGowAByMAAWlZYGZNM4RNGlUAykaAB2VAF-KkNugBiVPmI8GAHgUiM8OWB0UA&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=true&fileSize=false&timeTravel=false&sourceType=module&lineWrap=false&presets=es2015%2Creact%2Cstage-2&prettier=false&targets=&version=7.7.7&externalPlugins=">Babel在线转码网站</a></p>
<h2 id="2-13-模块化"><a href="#2-13-模块化" class="headerlink" title="2.13 模块化"></a>2.13 模块化</h2><h3 id="2-13-1-什么是模块化"><a href="#2-13-1-什么是模块化" class="headerlink" title="2.13.1 什么是模块化"></a>2.13.1 什么是模块化</h3><p>模块化就是把代码进行拆分，方便重复利用。类似java中的导包：要使用一个包，必须先导包。<br>而JS中没有包的概念，换来的是 模块。<br>模块功能主要由两个命令构成： export 和 import 。</p>
<ul>
<li>export 命令用于规定模块的对外接口。</li>
<li>import 命令用于导入其他模块提供的功能。    </li>
</ul>
<h3 id="2-13-2-export"><a href="#2-13-2-export" class="headerlink" title="2.13.2 export"></a>2.13.2 export</h3><p>比如我定义一个js文件:Util.js，里面有一个Util类 ：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">class</span> <span class="title class_">Util</span> &#123;</span><br><span class="line">	<span class="keyword">static</span> sum = <span class="function">(<span class="params">a, b</span>) =&gt;</span> a + b;</span><br><span class="line">&#125; </span><br><span class="line"><span class="comment">// 导出该类</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="title class_">Util</span>;</span><br></pre></td></tr></table></figure>

<h3 id="2-13-3-import"><a href="#2-13-3-import" class="headerlink" title="2.13.3 import"></a>2.13.3 import</h3><p>使用 export 命令定义了模块的对外接口以后，其他 JS 文件就可以通过 import 命令加载这个模块。<br>例如我要使用上面导出的Util：  </p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//Index.js</span></span><br><span class="line"><span class="comment">//导入Util类</span></span><br><span class="line"><span class="keyword">import</span> <span class="title class_">Util</span> <span class="keyword">from</span> <span class="string">&#x27;./Util&#x27;</span></span><br><span class="line"><span class="comment">//使用Util中的sum方法</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Util</span>.<span class="title function_">sum</span>(<span class="number">1</span>, <span class="number">2</span>));</span><br></pre></td></tr></table></figure>

<h2 id="2-14-async和await"><a href="#2-14-async和await" class="headerlink" title="2.14 async和await"></a>2.14 async和await</h2><p><code>async/await</code>实际上是ES2017对<code>Generator</code>改进后的语法糖。顾名思义，<code>async</code>关键字代表后面的函数中有异步操作</p>
<ul>
<li>async作为一个关键字放到函数前面<ul>
<li>任何一个<code>async</code>函数都会隐式返回一个<code>promise</code></li>
</ul>
</li>
<li><code>await</code>关键字只能在使用<code>async</code>定义的函数中使用<ul>
<li>​    await后面可以直接跟一个 Promise实例对象</li>
<li>​     await函数不能单独使用</li>
</ul>
</li>
<li><strong>async/await 让异步代码看起来、表现起来更像同步代码</strong></li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 1.  async 基础用法</span></span><br><span class="line"><span class="comment">// 1.1 async作为一个关键字放到函数前面</span></span><br><span class="line"><span class="keyword">async</span> <span class="keyword">function</span> <span class="title function_">queryData</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="comment">// 1.2 await关键字只能在使用async定义的函数中使用      await后面可以直接跟一个 Promise实例对象</span></span><br><span class="line">    <span class="keyword">var</span> ret = <span class="keyword">await</span> <span class="keyword">new</span> <span class="title class_">Promise</span>(<span class="keyword">function</span>(<span class="params">resolve, reject</span>)&#123;</span><br><span class="line">        <span class="built_in">setTimeout</span>(<span class="keyword">function</span>(<span class="params"></span>)&#123;</span><br><span class="line">            <span class="title function_">resolve</span>(<span class="string">&#x27;nihao&#x27;</span>)</span><br><span class="line">        &#125;,<span class="number">1000</span>);</span><br><span class="line">    &#125;)</span><br><span class="line">    <span class="comment">// console.log(ret.data)</span></span><br><span class="line">    <span class="keyword">return</span> ret;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 1.3 任何一个async函数都会隐式返回一个promise   我们可以使用then 进行链式编程</span></span><br><span class="line"><span class="title function_">queryData</span>().<span class="title function_">then</span>(<span class="keyword">function</span>(<span class="params">data</span>)&#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(data)</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 2.  async    函数处理多个异步函数</span></span><br><span class="line">axios.<span class="property">defaults</span>.<span class="property">baseURL</span> = <span class="string">&#x27;http://localhost:3000&#x27;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">async</span> <span class="keyword">function</span> <span class="title function_">queryData</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="comment">// 2.1  添加await之后 当前的await 返回结果之后才会执行后面的代码   </span></span><br><span class="line"></span><br><span class="line">    <span class="keyword">var</span> info = <span class="keyword">await</span> axios.<span class="title function_">get</span>(<span class="string">&#x27;async1&#x27;</span>);</span><br><span class="line">    <span class="comment">// 2.2  让异步代码看起来、表现起来更像同步代码</span></span><br><span class="line">    <span class="keyword">var</span> ret = <span class="keyword">await</span> axios.<span class="title function_">get</span>(<span class="string">&#x27;async2?info=&#x27;</span> + info.<span class="property">data</span>);</span><br><span class="line">    <span class="keyword">return</span> ret.<span class="property">data</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="title function_">queryData</span>().<span class="title function_">then</span>(<span class="keyword">function</span>(<span class="params">data</span>)&#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(data)</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

</section>
    <!-- Tags START -->
    
      <div class="tags">
        <span>Tags:</span>
        
  <a href="/tags#JavaScript" >
    <span class="tag-code">JavaScript</span>
  </a>

      </div>
    
    <!-- Tags END -->
    <!-- NAV START -->
    
  <div class="nav-container">
    <!-- reverse left and right to put prev and next in a more logic postition -->
    
      <a class="nav-left" href="/2019/12/23/%E8%B7%9F%E7%9D%80%E5%BD%A4%E5%93%A5%E5%AD%A6%E7%BD%91%E7%BB%9C-%E7%BD%91%E7%BB%9C%E5%B1%82%E4%B9%8BIPv4/">
        <span class="nav-arrow">← </span>
        
          跟着彤哥学网络-网络层之IPv4
        
      </a>
    
    
      <a class="nav-right" href="/2020/01/01/Adobe%20Premiere%E8%A7%86%E9%A2%91%E5%89%AA%E8%BE%91%E5%BF%85%E5%A4%87%E5%BF%AB%E6%8D%B7%E9%94%AE/">
        
          Adobe Premiere视频剪辑必备快捷键
        
        <span class="nav-arrow"> →</span>
      </a>
    
  </div>

    <!-- NAV END -->
    <!-- 打赏 START -->
    
      <div class="money-like">
        <div class="reward-btn">
          赏
          <span class="money-code">
            <span class="alipay-code">
              <div class="code-image"></div>
              <b>使用支付宝打赏</b>
            </span>
            <span class="wechat-code">
              <div class="code-image"></div>
              <b>使用微信打赏</b>
            </span>
          </span>
        </div>
        <p class="notice">若你觉得我的文章对你有帮助，欢迎点击上方按钮对我打赏</p>
      </div>
    
    <!-- 打赏 END -->
    <!-- 二维码 START -->
    
      <div class="qrcode">
        <canvas id="share-qrcode"></canvas>
        <p class="notice">扫描二维码，分享此文章</p>
      </div>
    
    <!-- 二维码 END -->
    
      <!-- Utterances START -->
      <div id="utterances"></div>
      <script src="https://utteranc.es/client.js"
        repo="ltyeamin/blogtalks"
        issue-term="pathname"
        theme="github-light"
        crossorigin="anonymous"
        async></script>    
      <!-- Utterances END -->
    
  </article>
  <!-- Article END -->
  <!-- Catalog START -->
  
    <aside class="catalog-container">
  <div class="toc-main">
    <strong class="toc-title">Catalog</strong>
    
      <ol class="toc-nav"><li class="toc-nav-item toc-nav-level-1"><a class="toc-nav-link" href="#1-%E4%BA%86%E8%A7%A3ES6"><span class="toc-nav-text">1. 了解ES6</span></a><ol class="toc-nav-child"><li class="toc-nav-item toc-nav-level-2"><a class="toc-nav-link" href="#1-1-%E4%B8%BA%E4%BB%80%E4%B9%88%E8%A6%81%E5%9B%9E%E9%A1%BEES6"><span class="toc-nav-text">1.1 为什么要回顾ES6</span></a></li><li class="toc-nav-item toc-nav-level-2"><a class="toc-nav-link" href="#1-2-%E4%BB%80%E4%B9%88%E6%98%AFES6"><span class="toc-nav-text">1.2 什么是ES6</span></a></li><li class="toc-nav-item toc-nav-level-2"><a class="toc-nav-link" href="#1-3-%E5%89%8D%E7%AB%AF%E5%8F%91%E5%B1%95%E5%8F%B2"><span class="toc-nav-text">1.3 前端发展史</span></a></li></ol></li><li class="toc-nav-item toc-nav-level-1"><a class="toc-nav-link" href="#2-ES6%E6%96%B0%E7%89%B9%E6%80%A7"><span class="toc-nav-text">2. ES6新特性</span></a><ol class="toc-nav-child"><li class="toc-nav-item toc-nav-level-2"><a class="toc-nav-link" href="#2-1-let%E5%92%8Cconst%E5%8F%98%E9%87%8F%E4%BF%AE%E9%A5%B0%E7%AC%A6"><span class="toc-nav-text">2.1  let和const变量修饰符</span></a></li><li class="toc-nav-item toc-nav-level-2"><a class="toc-nav-link" href="#2-2-%E5%AD%97%E7%AC%A6%E4%B8%B2%E6%89%A9%E5%B1%95"><span class="toc-nav-text">2.2 字符串扩展</span></a></li><li class="toc-nav-item toc-nav-level-2"><a class="toc-nav-link" href="#2-3-%E8%A7%A3%E6%9E%84%E8%A1%A8%E8%BE%BE%E5%BC%8F"><span class="toc-nav-text">2.3 解构表达式</span></a><ol class="toc-nav-child"><li class="toc-nav-item toc-nav-level-3"><a class="toc-nav-link" href="#2-3-1-%E6%95%B0%E7%BB%84%E8%A7%A3%E6%9E%84"><span class="toc-nav-text">2.3.1  数组解构</span></a></li><li class="toc-nav-item toc-nav-level-3"><a class="toc-nav-link" href="#2-3-2-%E5%AF%B9%E8%B1%A1%E8%A7%A3%E6%9E%84"><span class="toc-nav-text">2.3.2  对象解构</span></a></li></ol></li><li class="toc-nav-item toc-nav-level-2"><a class="toc-nav-link" href="#2-4-%E5%87%BD%E6%95%B0%E4%BC%98%E5%8C%96"><span class="toc-nav-text">2.4 函数优化</span></a><ol class="toc-nav-child"><li class="toc-nav-item toc-nav-level-3"><a class="toc-nav-link" href="#2-4-1-%E5%87%BD%E6%95%B0%E5%8F%82%E6%95%B0%E5%80%BC%E9%BB%98%E8%AE%A4%E5%80%BC"><span class="toc-nav-text">2.4.1 函数参数值默认值</span></a></li><li class="toc-nav-item toc-nav-level-3"><a class="toc-nav-link" href="#2-4-2-%E7%AE%AD%E5%A4%B4%E5%87%BD%E6%95%B0"><span class="toc-nav-text">2.4.2 箭头函数</span></a></li><li class="toc-nav-item toc-nav-level-3"><a class="toc-nav-link" href="#2-4-3-%E5%AF%B9%E8%B1%A1%E7%9A%84%E5%87%BD%E6%95%B0%E5%B1%9E%E6%80%A7%E7%AE%80%E5%86%99"><span class="toc-nav-text">2.4.3 对象的函数属性简写</span></a></li><li class="toc-nav-item toc-nav-level-3"><a class="toc-nav-link" href="#2-4-4-%E7%AE%AD%E5%A4%B4%E5%87%BD%E6%95%B0%E7%BB%93%E5%90%88%E8%A7%A3%E6%9E%84%E8%A1%A8%E8%BE%BE%E5%BC%8F"><span class="toc-nav-text">2.4.4 箭头函数结合解构表达式</span></a></li></ol></li><li class="toc-nav-item toc-nav-level-2"><a class="toc-nav-link" href="#2-5-map%E5%92%8Creduce"><span class="toc-nav-text">2.5 map和reduce</span></a><ol class="toc-nav-child"><li class="toc-nav-item toc-nav-level-3"><a class="toc-nav-link" href="#2-5-1-map"><span class="toc-nav-text">2.5.1 map()</span></a></li><li class="toc-nav-item toc-nav-level-3"><a class="toc-nav-link" href="#2-5-2-reduce"><span class="toc-nav-text">2.5.2 reduce()</span></a></li></ol></li><li class="toc-nav-item toc-nav-level-2"><a class="toc-nav-link" href="#2-6-%E6%89%A9%E5%B1%95%E8%BF%90%E7%AE%97%E7%AC%A6"><span class="toc-nav-text">2.6 扩展运算符</span></a></li><li class="toc-nav-item toc-nav-level-2"><a class="toc-nav-link" href="#2-7-Promise"><span class="toc-nav-text">2.7 Promise</span></a><ol class="toc-nav-child"><li class="toc-nav-item toc-nav-level-3"><a class="toc-nav-link" href="#2-7-1-%E5%BC%95%E5%85%A5Promise"><span class="toc-nav-text">2.7.1 引入Promise</span></a></li><li class="toc-nav-item toc-nav-level-3"><a class="toc-nav-link" href="#2-7-2-%E4%BD%BF%E7%94%A8Promise"><span class="toc-nav-text">2.7.2 使用Promise</span></a></li><li class="toc-nav-item toc-nav-level-3"><a class="toc-nav-link" href="#2-7-3-%E8%A7%A3%E5%86%B3%E5%9B%9E%E8%B0%83%E5%9C%B0%E7%8B%B1"><span class="toc-nav-text">2.7.3 解决回调地狱</span></a></li><li class="toc-nav-item toc-nav-level-3"><a class="toc-nav-link" href="#2-7-4-JQuery-Ajax-%E4%BD%BF%E7%94%A8Promise"><span class="toc-nav-text">2.7.4 JQuery Ajax 使用Promise</span></a></li></ol></li><li class="toc-nav-item toc-nav-level-2"><a class="toc-nav-link" href="#2-8-set%E5%92%8Cmap"><span class="toc-nav-text">2.8 set和map</span></a></li><li class="toc-nav-item toc-nav-level-2"><a class="toc-nav-link" href="#2-9-class%E7%9A%84%E5%9F%BA%E6%9C%AC%E8%AF%AD%E6%B3%95"><span class="toc-nav-text">2.9 class的基本语法</span></a></li><li class="toc-nav-item toc-nav-level-2"><a class="toc-nav-link" href="#2-10-Generator%E8%BF%AD%E4%BB%A3%E5%99%A8"><span class="toc-nav-text">2.10 Generator迭代器</span></a></li><li class="toc-nav-item toc-nav-level-2"><a class="toc-nav-link" href="#2-11-%E4%BF%AE%E9%A5%B0%E5%99%A8"><span class="toc-nav-text">2.11 修饰器</span></a></li><li class="toc-nav-item toc-nav-level-2"><a class="toc-nav-link" href="#2-12-%E8%BD%AC%E7%A0%81%E5%99%A8"><span class="toc-nav-text">2.12 转码器</span></a><ol class="toc-nav-child"><li class="toc-nav-item toc-nav-level-3"><a class="toc-nav-link" href="#2-12-1-UmiJS%E8%BD%AC%E7%A0%81%E5%99%A8"><span class="toc-nav-text">2.12.1 UmiJS转码器</span></a></li><li class="toc-nav-item toc-nav-level-3"><a class="toc-nav-link" href="#2-12-2-Babel-%E8%BD%AC%E7%A0%81%E5%99%A8"><span class="toc-nav-text">2.12.2  Babel 转码器</span></a></li><li class="toc-nav-item toc-nav-level-3"><a class="toc-nav-link" href="#2-12-3-%E5%9C%A8%E7%BA%BF%E8%BD%AC%E7%A0%81"><span class="toc-nav-text">2.12.3 在线转码</span></a></li></ol></li><li class="toc-nav-item toc-nav-level-2"><a class="toc-nav-link" href="#2-13-%E6%A8%A1%E5%9D%97%E5%8C%96"><span class="toc-nav-text">2.13 模块化</span></a><ol class="toc-nav-child"><li class="toc-nav-item toc-nav-level-3"><a class="toc-nav-link" href="#2-13-1-%E4%BB%80%E4%B9%88%E6%98%AF%E6%A8%A1%E5%9D%97%E5%8C%96"><span class="toc-nav-text">2.13.1 什么是模块化</span></a></li><li class="toc-nav-item toc-nav-level-3"><a class="toc-nav-link" href="#2-13-2-export"><span class="toc-nav-text">2.13.2 export</span></a></li><li class="toc-nav-item toc-nav-level-3"><a class="toc-nav-link" href="#2-13-3-import"><span class="toc-nav-text">2.13.3 import</span></a></li></ol></li><li class="toc-nav-item toc-nav-level-2"><a class="toc-nav-link" href="#2-14-async%E5%92%8Cawait"><span class="toc-nav-text">2.14 async和await</span></a></li></ol></li></ol>
    
  </div>
</aside>
  
  <!-- Catalog END -->
</main>

<script>
  (function () {
    var url = 'http://example.com/2020/01/01/ES6回顾/';
    var banner = ''
    if (banner !== '' && banner !== 'undefined' && banner !== 'null') {
      $('#article-banner').css({
        'background-image': 'url(' + banner + ')'
      })
    } else {
      $('#article-banner').geopattern(url)
    }
    $('.header').removeClass('fixed-header')

    // error image
    $(".markdown-content img").on('error', function() {
      $(this).attr('src', '/css/images/error_icon.png')
      $(this).css({
        'cursor': 'default'
      })
    })

    // zoom image
    $(".markdown-content img").on('click', function() {
      var src = $(this).attr('src')
      if (src !== '/css/images/error_icon.png') {
        var imageW = $(this).width()
        var imageH = $(this).height()

        var zoom = ($(window).width() * 0.95 / imageW).toFixed(2)
        zoom = zoom < 1 ? 1 : zoom
        zoom = zoom > 2 ? 2 : zoom
        var transY = (($(window).height() - imageH) / 2).toFixed(2)

        $('body').append('<div class="image-view-wrap"><div class="image-view-inner"><img src="'+ src +'" /></div></div>')
        $('.image-view-wrap').addClass('wrap-active')
        $('.image-view-wrap img').css({
          'width': `${imageW}`,
          'transform': `translate3d(0, ${transY}px, 0) scale3d(${zoom}, ${zoom}, 1)`
        })
        $('html').css('overflow', 'hidden')

        $('.image-view-wrap').on('click', function() {
          $(this).remove()
          $('html').attr('style', '')
        })
      }
    })
  })();
</script>


  <script>
    var qr = new QRious({
      element: document.getElementById('share-qrcode'),
      value: document.location.href
    });
  </script>






    <div class="scroll-top">
  <span class="arrow-icon"></span>
</div>
    <footer class="app-footer">
  <p class="copyright">
    &copy; 2024 | Proudly powered by <a href="https://hexo.io" target="_blank">Hexo</a>
    <br>
    Theme by <a target="_blank" rel="noopener" href="https://github.com/ltyeamin">tong.li</a>
  </p>
</footer>

<script>
  function async(u, c) {
    var d = document, t = 'script',
      o = d.createElement(t),
      s = d.getElementsByTagName(t)[0];
    o.src = u;
    if (c) { o.addEventListener('load', function (e) { c(null, e); }, false); }
    s.parentNode.insertBefore(o, s);
  }
</script>
<script>
  async("https://cdn.staticfile.org/fastclick/1.0.6/fastclick.min.js", function(){
    FastClick.attach(document.body);
  })
</script>

<script>
  var hasLine = 'true';
  async("https://cdn.staticfile.org/highlight.js/9.12.0/highlight.min.js", function(){
    $('figure pre').each(function(i, block) {
      var figure = $(this).parents('figure');
      if (hasLine === 'false') {
        figure.find('.gutter').hide();
      }
      hljs.configure({useBR: true});
      var lang = figure.attr('class').split(' ')[1] || 'code';
      var codeHtml = $(this).html();
      var codeTag = document.createElement('code');
      codeTag.className = lang;
      codeTag.innerHTML = codeHtml;
      $(this).attr('class', '').empty().html(codeTag);
      figure.attr('data-lang', lang.toUpperCase());
      hljs.highlightBlock(block);
    });
  })
</script>
<!-- Baidu Tongji -->



<script src='https://cdn.staticfile.org/mermaid/8.11.2/mermaid.min.js'></script>



<script src="/js/script.js"></script>


  </body>
</html>